<!--合伙人-邀请码列表-->
<template>
  <scroller class="all bg1">
    <div class="wrapper">

      <!--创建邀请码-->
      <div class="cj bg2">
        <div class="cj-title bg3">
          <text class="font26 text1 all">{{T('创建邀请码')}}</text>
          <text class="font24 text3">{{T('（您还可创建${1}个邀请码）').replace("${1}", number)}}</text>
        </div>

        <div class="cj-bl">
            <text class="font30 text2 all">{{T('设置与好友分配比例')}}</text>
            <div @click="rem" class="cj-bl-size bg3">
              <text class="font62 text3">{{'-'}}</text>
            </div>
            <div class="cj-bl-value bg3">
              <text class="font26 text2">{{this.scale+'%'}}</text>
            </div>
            <div @click="add" class="cj-bl-size bg3">
              <text class="font62 text3">{{'+'}}</text>
            </div>
        </div>
        
        <div class="cj-name">
          <text class="font26 text2">{{T('设置邀请码名称：')}}</text>
          <input class="font30 text2 cj-name-input" ref="barcode" v-model="codeName" type="text" :placeholder="T('请输入邀请码名称')" @input="onInput" @focus="onFocus" @blur="onBlur">
          <div class="line line1"></div>
        </div>

        <div class="cj-mr">
          <div class="row acenter" @click="setDefault">
            <div class="cj-mr-yes" v-if="selectType">
              <div class="cj-mr-yes-q"></div>
            </div>
            <div class="cj-mr-no" v-else></div>
            <text class="font22 text3">{{T('设为默认')}}</text>
          </div>
        </div>

        <div class="cj-but main-bt1" @click="createInviteCode">
          <text class="font30 text1">{{T('创建邀请码')}}</text>
        </div>
      </div>

      <!--列表-->
      <div class="cell bg2" v-for="(item, index) in datas" v-bind:key="index">
        
        <div class="row acenter">
          <text class="font30 text3">{{item.codeName}}</text>
          <text class="font26 main-t1" @click="editName(item)">{{'  '+T('编辑')+'  '}}</text>
          <div class="all"></div>
          <text class="font30 text3">{{item.inviteCode}}</text>
          <LImage class="copy-ma" :src="Config.img('hhr_activity_but_copy.png')" @click="copyCode(T('复制成功'),item.inviteCode)"></LImage>
        </div>

        <text class="font26 text3 all tRight">{{T('给好友分配比例')+item.proportion * 100 +'%'}}</text>

        <div class="row acenter">

          <div class="row acenter" @click="httpSetDefault(item,index)">
            <div class="cj-mr-yes" v-if="index == 0">
              <div class="cj-mr-yes-q"></div>
            </div>
            <div class="cj-mr-no" v-else></div>
            <text class="font22 text3" v-if="index == 0">{{T('已设为默认')}}</text>
            <text class="font22 text3" v-else>{{T('设为默认')}}</text>
          </div>
          

          <div class="all"></div>
          <text class="font26 main-t1" @click="inviteShare(item.inviteCode, item.proportion * 100 + '')">{{T('邀请好友') + ' '}}</text>
          <text class="font26 main-t1" @click="inviteRecord(item.inviteCode, item.codeName)">{{' ' + T('邀请记录')}}</text>
        </div>
      </div>
    </div>
  </scroller>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
.wrapper{
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 60px;
}
.line {
  height: 1px;
}

/************************* 创建*/
.cj {
  border-radius: 12px;
  padding-left: 30px;
  padding-right: 30px;
  margin-top: 20px;
}
.cj-title {
  flex-direction: row;
  align-items: center;
  height:82px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  padding-left: 30px;
  padding-right: 30px;
  margin-left: -30px;
  margin-right: -30px;
}
.cj-bl{
  flex-direction: row;
  align-items: center;
  margin-top: 40px;
}
.cj-bl-size {
  justify-content: center;
  align-items: center;
  width:60px;
  height:60px;
  border-radius:4px;
}
.cj-bl-value {
  justify-content: center;
  align-items: center;
  width:120px;
  height:60px;
  border-radius:4px;
  margin-left: 30px;
  margin-right: 30px;
}
.cj-name{
  margin-top: 40px;
}
.cj-name-input{
  height: 50px;
  margin-top: 10px;
  background-color:transparent;
  placeholder-color:#6E7488;
}
.cj-mr {
  flex-direction: row;
  margin-top: 40px;
}
.cj-mr-no{
  width:22px;
  height:22px;
  border-width: 2px;
  border-color: rgba(144,154,180,1);
  border-radius:50%;
  margin-right: 10px;
}
.cj-mr-yes{
  justify-content: center;
  align-items: center;
  width:22px;
  height:22px;
  border-width: 2px;
  border-color: rgba(35,172,255,1);
  border-radius:50%;
  margin-right: 10px;
}
.cj-mr-yes-q{
  width:14px;
  height:14px;
  background-color:rgba(35,172,255,1);
  border-radius:50%;
}
.cj-but{
  justify-content: center;
  align-items: center;
  height:74px;
  border-radius:12px;
  margin-top: 60px;
  margin-bottom: 60px;
}

/*************************  列表*/
.cell{
  height:248px;
  border-radius:12px;
  padding: 30px;
  margin-top: 20px;
}
</style>

<script>
import jnavigator from "@/_js/navigator";
import jmodal from "@/_js/modal";
import jmath from "@/_js/math";
import jconfig from "@/_js/config";
import jhttps from "@/_js/https";

const weexFunction = weex.requireModule("WeexFunction");
const clipboard = weex.requireModule("clipboard");

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T("邀请码"));

export default {
  
  data() {
    return {
      T:T,
      Config:jconfig,

      scale:50, //比例
      selectType:false, //trun默认选中
      codeName:'', //邀请码名称 

      lineColor: 'chuangjian-name-line',

      number:0, //可创建邀请码数量
      datas: undefined, //邀请码数
    };
  },


  //即将显示
  mounted(){
    this.httpInviteCodes();
  },

  methods: {

    //https邀请码列表
    httpInviteCodes(){

      var param = {};
      jhttps.post("partner/queryMyInviteCode",param,true,(data)=>{
        if(data.status == 200){
          data = data.data;
          this.datas = data.inviteCodeList;
          this.number = jmath.jian(data.allNumber, data.createdNumber);
        } else {
          jmodal.toast(data.msg);
        }
      });
    },

    //https创建邀请码
    httpCreateInviteCode(){
      
      jmodal.showLoad();
      var param = {'proportion':this.scale/100+"", 
                    'codeName':this.codeName, 
                    'isDefault':this.selectType};
      jhttps.postX("partner/createInviteCode",param,true,(data)=>{
        jmodal.hideLoad();
        if(data.status == 200){
          
          this.codeName = "";
          jmodal.toast(T('创建成功'));
          setTimeout(() => {
            this.httpInviteCodes();
          }, 700);
        }else{
          jmodal.toast(data.msg);
        }
      });
    },

    //http编辑名称
    httpEditName(item, value){

      jmodal.showLoad();
      var param = {"partnerId":item.partnerId,
                  "codeName":value};
      jhttps.postX("partner/updateInviteCodeName",param,true,(data)=>{
        jmodal.hideLoad();
        if(data.status == 200){
          item.codeName = value;
          jmodal.toast(T('编辑成功'));
        }else{
          jmodal.toast(data.msg);
        }
      });
    },

    //http设置默认
    httpSetDefault(item,index){

      jmodal.showLoad();
      var param = {"partnerId":item.partnerId};
      jhttps.postX("partner/setDefaultInviteCode", param,true,(data)=>{
        jmodal.hideLoad();
        if(data.status == 200){
          var removeItems = this.datas.splice(index,1);
          this.datas.splice(0,0,removeItems[0]);
          jmodal.toast(T('设置成功'));
          setTimeout(() => {
            this.httpInviteCodes();
          }, 700);
        }else{
          jmodal.toast(data.msg);
        }
      });
    },

    //比例-减
    rem(){
      if(this.scale > 0) {
        this.scale -= 10;
      }
    },

    //比例-加
    add(){
      if(this.scale < 100) {
        this.scale += 10;
      }
    },

    //输入框选中
    onFocus(e) {
      this.lineColor = 'chuangjian-name-line-select';
    },

    //输入框取消选中
    onBlur(e) {
      this.lineColor = 'chuangjian-name-line';
    },

    //输入内容改变
    onInput(e){
      this.codeName = e.value;
    },
    
    //设置默认
    setDefault(){
      this.selectType = !this.selectType;
    },

    //创建邀请码
    createInviteCode(){

      this.$refs.barcode.blur();
      if(this.codeName.length == 0){
        jmodal.toast(T('请输入邀请码名称'));
      } else if (this.codeName.length > 6) {
        jmodal.toast(T('邀请码名称不可超过6个字符'));
      } else {
        jmodal.confirm({title:T('确认创建邀请码'),message:T('当前分配比例为${1}%。').replace("${1}",this.scale)},(flag)=>{
          if(flag == "true"){
            this.httpCreateInviteCode();
          }
        });
      }
    },

    //复制邀请码
    copyCode(msg, code){
      jmodal.toast({message:msg, duration:2});
      clipboard.setString(code);
    },

    //编辑名称
    editName(item){

      jmodal.prompt({title:T("编辑邀请码名称"), placeholder:T("请输入邀请码名称"), value:item.codeName},(value)=>{
        if (!value.length) {
          jmodal.toast(T('输入不能为空'));
          return;
        };
        
        if (value.length > 6) {
          jmodal.toast(T('邀请码名称不可超过6个字符'));
          return;
        }
        
        this.httpEditName(item, value);
      });
    },

    //邀请好友
    inviteShare(code, scale){
      var param = {'inviteScale':scale, 
                    'inviteCode':code};
      jnavigator.openDialog('share/ShareInviteHome', param);
    },

    //邀请记录
    inviteRecord(inviteCode, codeName){
      var param = {'inviteCode':inviteCode,
                   'codeName':codeName};
      jnavigator.open("", "invite/PartnerInviteRecord", param);
    }
  },
};
</script>
